<template>
    <div class="discovery_page" v-if="homePage.data.data">
        <div class="discovery_content">
            <div class="banner_swipe">
                <div class="slide_wrap">
                    <mt-swipe :auto="4000">
                        <mt-swipe-item v-for="(item,index) in homePage.data.data.blocks[0].extInfo.banners" :key="index">
                            <img v-lazy="item.pic">
                            <span class="slider_tags" :style="{background:item.titleColor}">{{item.typeTitle}}</span>
                        </mt-swipe-item>
                    </mt-swipe>
                </div>
            </div>
            <div class="tab_drag">
                <div class="tab_drag_wrap" @touchstart='handleTouchDown' @touchmove='handleTouchMove'>
                    <a href="#" class="tab_drag_item" v-for="(item,index) in dragonBall.data.data" :key="index">
                        <div class="tab_drag_item_img">
                            <img :src="item.iconUrl">
                        </div>
                        <span class="tab_drag_item_name">{{item.name}}</span>
                    </a>
                </div>
            </div>
            <div class="recommend_playlist">
                <playlistblock>
                    <h3 slot="leftpart">{{homePage.data.data.blocks[1].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart">{{homePage.data.data.blocks[1].uiElement.button.text}}<i class="iconfont"></i></span>
                    <div class="playlist" slot="content">
                        <simpleswipe>
                            <ssitem  v-for="(item,index) in homePage.data.data.blocks[1].creatives" :key="index">
                                <a href="#" class="playlist_item" @touchend.prevent="openPlaylist(item.creativeId,1)">
                                    <div class="playlist_item_img">
                                        <img v-lazy="item.uiElement.image.imageUrl">
                                        <span class="numCount"><i class="iconfont"></i>{{item.resources[0].resourceExtInfo.playCount|formatNumCount}}</span>
                                    </div>
                                    <div class="playlist_item_name">
                                        <span>{{item.uiElement.mainTitle.title}}</span>
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="recommend_style">
                <playlistblock>
                    <h3 slot="leftpart"><a href="#" class="refresh_button"><img src="../img/icon/refresh.png"></a>{{homePage.data.data.blocks[2].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart"><i class="iconfont"></i>{{homePage.data.data.blocks[2].uiElement.button.text}}</span>
                    <div class="playlist_slide" slot="content">
                        <simpleswipe>
                            <ssitem v-for="(item,index) in homePage.data.data.blocks[2].creatives" :key="index">
                                <a href="#" class="playlist_slide_item" v-for="(ite,inde) in item.resources" :key="inde">
                                    <div class="playlist_slide_item_img">
                                        <img v-lazy="ite.uiElement.image.imageUrl">
                                        <span class="stateOfPlay iconfont"></span>
                                    </div>
                                    <div class="playlist_slide_item_desc">
                                        <p class="mainTitle"><span class="theTitle">{{ite.uiElement.mainTitle.title}}</span><span class="artists">&nbsp;-&nbsp;{{ite.resourceExtInfo.artists|formatName}}</span></p>
                                        <p class="subTitle" :title="ite.uiElement.subTitle.titleType" v-if="ite.uiElement.subTitle">{{ite.uiElement.subTitle.title}}</p>
                                    </div>
                                    <div class="songRelatedVideo">
                                        <img src="../img/icon/related.png">
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="hot_podcasts">
                <playlistblock>
                    <h3 slot="leftpart"><a href="#" class="refresh_button"><img src="../img/icon/refresh.png"></a>{{homePage.data.data.blocks[8].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart">{{homePage.data.data.blocks[8].uiElement.button.text}}<i class="iconfont"></i></span>
                    <div class="playlist" slot="content">
                        <simpleswipe>
                            <ssitem  v-for="(item,index) in homePage.data.data.blocks[8].creatives" :key="index">
                                <a href="#" class="playlist_item">
                                    <div class="playlist_item_img">
                                        <img v-lazy="item.uiElement.image.imageUrl">
                                        <span class="numCount"><i class="iconfont"></i>{{item.creativeExtInfoVO.playCount|formatNumCount}}</span>
                                    </div>
                                    <div class="playlist_item_name">
                                        <span>{{item.uiElement.mainTitle.title}}</span>
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="music_radar">
                <playlistblock>
                    <h3 slot="leftpart">{{homePage.data.data.blocks[6].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart">{{homePage.data.data.blocks[6].uiElement.button.text}}<i class="iconfont"></i></span>
                    <div class="playlist_music_videos" slot="content">
                        <simpleswipe>
                            <ssitem  v-for="(item,index) in homePage.data.data.blocks[6].creatives" :key="index">
                                <a href="#" class="playlist_item" @touchend.prevent="openPlaylist(item.creativeId,2)">
                                    <div class="playlist_item_img">
                                        <img v-lazy="item.uiElement.image.imageUrl">
                                        <span class="numCount"><i class="iconfont"></i>{{item.resources[0].resourceExtInfo.playCount|formatNumCount}}</span>
                                    </div>
                                    <div class="playlist_item_name">
                                        <span>{{item.uiElement.mainTitle.title}}</span>
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="offical_playlist">
                <playlistblock>
                    <h3 slot="leftpart">{{homePage.data.data.blocks[7].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart">{{homePage.data.data.blocks[7].uiElement.button.text}}<i class="iconfont"></i></span>
                    <div class="playlist_music_videos" slot="content">
                        <simpleswipe>
                            <ssitem  v-for="(item,index) in homePage.data.data.blocks[7].creatives" :key="index">
                                <a href="#" class="playlist_item" @touchend.prevent="openPlaylist(item.creativeId,2)">
                                    <div class="playlist_item_img">
                                        <img v-lazy="item.uiElement.image.imageUrl">
                                        <span class="numCount"><i class="iconfont"></i>{{item.resources[0].resourceExtInfo.playCount|formatNumCount}}</span>
                                    </div>
                                    <div class="playlist_item_name">
                                        <span>{{item.uiElement.mainTitle.title}}</span>
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="newSong_newDisc_album">
                <playlistblock>
                    <ul class="tabTitle" slot="leftpart">
                        <li :class="{'tabTitle_item':true,'tabTitle_active':nna_active=='new-song'}" title="new-song" @touchstart.prevent="switchTab">新歌</li>
                        <li style="color:#ccc">|</li>
                        <li :class="{'tabTitle_item':true,'tabTitle_active':nna_active=='new-disc'}" title="new-disc" @touchstart.prevent="switchTab">新碟</li>
                        <li style="color:#ccc">|</li>
                        <li :class="{'tabTitle_item':true,'tabTitle_active':nna_active=='album'}" title="album" @touchstart.prevent="switchTab">数字专辑</li>
                    </ul>
                    <span slot="rightpart">更多<i class="iconfont"></i></span>
                    <div class="tab_playlist_slide" slot="content">
                        <mt-tab-container v-model="nna_active">
                            <mt-tab-container-item id="new-song">
                                <simpleswipe>
                                    <ssitem v-show="item.creativeType == 'NEW_SONG_HOMEPAGE'" v-for="(item,index) in homePage.data.data.blocks[3].creatives" :key="index">
                                        <a href="#" class="playlist_slide_item" v-for="(ite,inde) in item.resources" :key="inde">
                                            <div class="playlist_slide_item_img">
                                                <img v-lazy="ite.uiElement.image.imageUrl">
                                                <span class="stateOfPlay iconfont"></span>
                                            </div>
                                            <div class="playlist_slide_item_desc">
                                                <p class="mainTitle"><span class="theTitle">{{ite.uiElement.mainTitle.title}}</span><span class="artists">&nbsp;-&nbsp;{{ite.resourceExtInfo.artists|formatName}}</span></p>
                                                <p class="subTitle" :title="ite.uiElement.subTitle.titleType" v-if="ite.uiElement.subTitle">{{ite.uiElement.subTitle.title}}</p>
                                            </div>
                                            <div class="songRelatedVideo">
                                                <img src="../img/icon/related.png">
                                            </div>
                                        </a>
                                    </ssitem>
                                </simpleswipe>
                            </mt-tab-container-item>
                            <mt-tab-container-item id="new-disc">
                                <simpleswipe>
                                    <ssitem v-show="item.creativeType == 'NEW_ALBUM_HOMEPAGE'" v-for="(item,index) in homePage.data.data.blocks[3].creatives" :key="index">
                                        <a href="#" class="playlist_slide_item" v-for="(ite,inde) in item.resources" :key="inde">
                                            <div class="playlist_slide_item_img">
                                                <img v-lazy="ite.uiElement.image.imageUrl">
                                                <span class="stateOfPlay iconfont"></span>
                                            </div>
                                            <div class="playlist_slide_item_desc">
                                                <p class="mainTitle"><span class="theTitle">{{ite.uiElement.mainTitle.title}}</span><span class="artists">&nbsp;-&nbsp;{{ite.resourceExtInfo.artists|formatName}}</span></p>
                                                <p class="subTitle" :title="ite.uiElement.subTitle.titleType" v-if="ite.uiElement.subTitle">{{ite.uiElement.subTitle.title}}</p>
                                            </div>
                                            <div class="songRelatedVideo">
                                                <img src="../img/icon/related.png">
                                            </div>
                                        </a>
                                    </ssitem>
                                </simpleswipe>
                            </mt-tab-container-item>
                            <mt-tab-container-item id="album">
                                <simpleswipe>
                                    <ssitem v-show="item.creativeType == 'DIGITAL_ALBUM_HOMEPAGE'" v-for="(item,index) in homePage.data.data.blocks[3].creatives" :key="index">
                                        <a href="#" class="playlist_slide_item" v-for="(ite,inde) in item.resources" :key="inde">
                                            <div class="playlist_slide_item_img">
                                                <img v-lazy="ite.uiElement.image.imageUrl">
                                                <span class="stateOfPlay iconfont"></span>
                                            </div>
                                            <div class="playlist_slide_item_desc">
                                                <p class="mainTitle"><span class="theTitle">{{ite.uiElement.mainTitle.title}}</span><span class="artists">&nbsp;-&nbsp;{{ite.resourceExtInfo.artists|formatName}}</span></p>
                                                <p class="subTitle" :title="ite.uiElement.subTitle.titleType" v-if="ite.uiElement.subTitle">{{ite.uiElement.subTitle.title}}</p>
                                            </div>
                                            <div class="songRelatedVideo">
                                                <img src="../img/icon/related.png">
                                            </div>
                                        </a>
                                    </ssitem>
                                </simpleswipe>
                            </mt-tab-container-item>
                        </mt-tab-container>
                    </div>
                </playlistblock>
            </div>
            <div class="song_toplist">
                <playlistblock>
                    <h3 slot="leftpart">排行榜</h3>
                    <span slot="rightpart">更多<i class="iconfont"></i></span>
                    <div class="toplist_slide" slot="content">
                        <simpleswipe>
                            <ssitem v-for="(item,index) in songToplist.data" :key="index">
                                <div class="toplist_slide_item">
                                    <a href="#" class="toplist_name"><h3>{{item}}<i class="iconfont"></i></h3></a>
                                    <a href="#" class="playlist_slide_item" v-for="(ite,inde) in topSongs[index]" :key="inde">
                                        <div class="playlist_slide_item_img">
                                            <img v-lazy="ite.picUrl">
                                            <span class="stateOfPlay iconfont"></span>
                                        </div>
                                        <div class="playlist_slide_item_desc">
                                            <p class="mainTitle"><span class="songNum">{{inde+1}}</span><span class="songName">{{ite.name}}</span></p>
                                        </div>
                                        <div class="newThing">
                                            <img src="../img/icon/new.png">
                                        </div>
                                    </a>
                                </div>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <div class="offical_playlist">
                <playlistblock>
                    <h3 slot="leftpart">{{homePage.data.data.blocks[10].uiElement.subTitle.title}}</h3>
                    <span slot="rightpart">{{homePage.data.data.blocks[10].uiElement.button.text}}<i class="iconfont"></i></span>
                    <div class="playlist_music_videos" slot="content">
                        <simpleswipe>
                            <ssitem  v-for="(item,index) in homePage.data.data.blocks[10].creatives" :key="index">
                                <a href="#" class="playlist_item" @touchend.prevent="openPlaylist(item.creativeId,1)">
                                    <div class="playlist_item_img">
                                        <img v-lazy="item.uiElement.image.imageUrl">
                                        <span class="numCount"><i class="iconfont"></i>{{item.resources[0].resourceExtInfo.playCount|formatNumCount}}</span>
                                    </div>
                                    <div class="playlist_item_name">
                                        <span>{{item.uiElement.mainTitle.title}}</span>
                                    </div>
                                </a>
                            </ssitem>
                        </simpleswipe>
                    </div>
                </playlistblock>
            </div>
            <mt-popup v-model="playlistVisible" position="bottom">
                <playlistpopup :type="playlistType" v-if="playlistVisible">
                    <span slot="back" @touchstart.prevent="playlistVisible = false" class="iconfont icon-leftarrowpx"></span>
                    <span slot="search" class="iconfont icon-search"></span>
                    <span slot="more" class="iconfont icon-more-vertical"></span>
                    <div slot="content" class="single-playlist-content">
                        <myplaylist
                            :isLoading='true'
                            v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="10">                            
                            <div slot="title" class="single_playlist_content_title">
                                <span class="iconfont icon-bofang"></span>
                                <h3 class="playAll">播放全部 ({{singlePlaylist.data.length?singlePlaylist.data.length:0}})</h3>
                            </div>
                            <span slot="add" class="iconfont icon-xiazai"></span>
                            <span slot="more" class="iconfont icon-xuanzhong"></span>
                            <playlistitem :songDetail=singleSong.data slot="content" v-for="(item,index) in loadingSongList" :key="index" :keys="index">
                                <span class="musicIndex" slot="index">{{index + 1}}</span>
                                <span slot="mainT">{{item.al.name}}</span>
                                <span slot="subT">{{item.ar|formatName}}</span>
                                <img v-lazy="item.al.picUrl">
                                <div class="header-more" slot="right">
                                    <img src="../img/icon/related.png">
                                </div>
                                <div class="header-more" slot="right">
                                    <img src="../img/icon/my/playlist/more.png">
                                </div>
                            </playlistitem>
                        </myplaylist>
                    </div>
                </playlistpopup>
            </mt-popup>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import {Lazyload} from 'mint-ui';
    import playlistblock from "../component/playListBlock.vue";
    import simpleswipe from "../component/simpleSwipe.vue";
    import ssitem from "../component/ssItem.vue";
    import playlistpopup from "./playlistPopUp.vue";
    import myplaylist from "../component/myPlaylist.vue";
    import playlistitem from "../component/playlistItem.vue";

    import {request} from "../js/request.js";
    Vue.use(Lazyload);
    export default {
        components:{
            playlistblock,
            simpleswipe,
            ssitem,
            playlistpopup,
            myplaylist,
            playlistitem
        },
        data(){
            return {
                playlistVisible:false,
                isTrigger:true,
                loadingSongList:[],
                playlistType:1,
                touchRelate:{
                    x:"",xOrigin:"",moveDistance:""
                },
                playlistHeaderData:{},
                nna_active:"new-song",
                dragonBall:{url:"/homepage/dragon/ball",data:""},
                homePage:{url:"/homepage/block/page",data:""},
                songToplist:{url:"/toplist",data:""},
                topSongs:[
                    [
                        {name:"心动",picUrl:"http://p3.music.126.net/6qHEz6cFxbxhSIQwsEimrw==/109951166279509814.jpg"},
                        {name:"偏偏是你",picUrl:"http://p3.music.126.net/9v3mIh8-_PE1c4NSuG0H_Q==/109951166283235127.jpg"},
                        {name:"哪里都是你",picUrl:"http://p3.music.126.net/lnOnBbP_H-052Hv5ls-QjA==/109951162964628408.jpg"}
                    ],
                    [
                        {name:"你值得更好的",picUrl:"http://p3.music.126.net/KS0TddHKX8c3atG3CkmdUw==/109951166264542938.jpg"},
                        {name:"心动",picUrl:"http://p4.music.126.net/6qHEz6cFxbxhSIQwsEimrw==/109951166279509814.jpg"},
                        {name:"变废为宝",picUrl:"http://p3.music.126.net/AJmUHo9JgzwZyOCSiZiHlQ==/109951166183527742.jpg"}
                    ],
                    [
                        {name:"还是我们",picUrl:"http://p4.music.126.net/NJUk0CRHvuoM3QBxKZazjw==/109951166254281885.jpg"},
                        {name:"我爱你",picUrl:"http://p4.music.126.net/0BFjWnIq177KkhGWpM5BUg==/109951166249611023.jpg"},
                        {name:"般配",picUrl:"http://p3.music.126.net/_8D98wTjXWMhYl5Bofui0w==/109951166155884642.jpg"}
                    ],
                    [
                        {name:"STAY",picUrl:"http://p3.music.126.net/qpKo50Kz2YRYn2oUBHWX9w==/109951166196887769.jpg"},
                        {name:"哪里都是你",picUrl:"http://p3.music.126.net/lnOnBbP_H-052Hv5ls-QjA==/109951162964628408.jpg"},
                        {name:"心动",picUrl:"http://p3.music.126.net/6qHEz6cFxbxhSIQwsEimrw==/109951166279509814.jpg"}
                    ],
                    [
                        {name:"星辰大海",picUrl:"http://p3.music.126.net/eRSdB2vIoBHJV7-0Ga3i6g==/109951165641911293.jpg"},
                        {name:"修炼爱情",picUrl:"http://p3.music.126.net/D_hiKMwrdQlqD36LoKLO2w==/109951163187408030.jpg"},
                        {name:"可惜没如果",picUrl:"http://p3.music.126.net/X0EDfXzxMQJiQ-71JFGdZw==/3238061746556733.jpg"}
                    ],
                ],
                singlePlaylist:{url:"/playlist/detail?id=",data:""},
                singleSong:{url:"song/detail?ids=",data:new Array},
            }
        },
        created(){
            this.$bus.on('switchTriger',value=>{
                this.isTrigger = value;
            })
            this.$bus.emit('getTrigger',this.isTrigger);
        },
        mounted(){
            request({url:this.dragonBall.url + "?timestamp = " + new Date()}).then(value=>this.dragonBall.data = value).catch(error=>{
                this.$router.push('/occurerror');
            });
            if(sessionStorage.getItem('homePage') != null){
                this.homePage.data = JSON.parse(sessionStorage.getItem('homePage'));
            }else{
                request({url:this.homePage.url}).then(value=>{
                    sessionStorage.setItem('homePage',JSON.stringify(value))
                    this.homePage.data = value;
                }).catch(error=>{
                    this.$router.push('/occurerror');
                });
            }
            if(sessionStorage.getItem('songToplist') != null){
                this.songToplist.data = sessionStorage.getItem('songToplist');
            }else{
                request({url:this.songToplist.url}).then(value=>{
                    let arrs = [];
                    for(var i = 0;i < 5;i++){
                        arrs.push(value.list[i].name)
                    }
                    this.songToplist.data = arrs;
                    sessionStorage.setItem('songToplist',arrs);
                }).catch(error=>{
                    console.log("Wrong");
                    /* this.$router.push('/occurerror'); */
                });
            }
        },
        methods:{
            handleTouchDown(){
                this.$bus.emit('touchdown',this.touchRelate);
            },
            handleTouchMove(){
                this.$bus.emit('touchmove',this.touchRelate);
            },
            switchTab(e){
                this.nna_active = e.target.title;
            },
            openPlaylist(id,type){
                let objectArrLength = 0;
                this.loadingSongList = [];
                this.playlistType = type;
                if(this.isTrigger){
                    this.playlistVisible = true;
                    request({url:this.singlePlaylist.url + id}).then(value=>{
                        if(type == 1){
                            this.playlistHeaderData = {
                                backgroundCoverUrl:value.playlist.backgroundCoverUrl==null?value.playlist.coverImgUrl:value.playlist.backgroundCoverUrl,
                                name:value.playlist.name,
                                creator:{
                                    avatarUrl:value.playlist.creator.avatarUrl,
                                    nickname:value.playlist.creator.nickname,
                                },
                                description:value.playlist.description,
                                subscribedCount:value.playlist.subscribedCount,
                                commentCount:value.playlist.commentCount,
                                shareCount:value.playlist.shareCount,
                            }
                        }else if(type == 2){
                            this.playlistHeaderData = {
                                backgroundCoverUrl:value.playlist.backgroundCoverUrl,
                                name:value.playlist.name,
                                updateFrequency:value.playlist.updateFrequency,
                                description:value.playlist.description,
                                subscribedCount:value.playlist.subscribedCount,
                                commentCount:value.playlist.commentCount,
                                shareCount:value.playlist.shareCount,
                            }
                        }
                        this.$bus.emit('playlistHeaderData',this.playlistHeaderData);
                        this.singlePlaylist.data = value.playlist.trackIds;



                        //--------------------------------------------------------------------
                        let arrs = [];
                        this.singlePlaylist.data.forEach((item,index)=>{
                            //限制30首
                            if(index < 30){
                                arrs.push(request({url:this.singleSong.url + item.id}));
                            }
                        })
                        this.singleSong.data = new Array(0)
                        Promise.all(arrs).then(val=>{
                            val.forEach((item,index)=>{
                                this.singleSong.data.push(item.songs[0]);
                                if(this.singlePlaylist.data.length > 10 && index < 10){
                                    this.loadingSongList.push(item.songs[0])
                                }
                            })
                        })

                        //--------------------------------------------------------------------


                        
                        if(this.singlePlaylist.length < 10){
                            this.loadingSongList = this.singleSong.data;
                        }
                    })
                }
            },
            loadMore() {
                this.loading = true;
                let arrs = Array.prototype.slice.call(this.singleSong.data);
                setTimeout(() => {
                    let last = this.loadingSongList.length
                    for(let i = 0;i < 10;i++){
                        if(arrs[last + i]){
                            this.loadingSongList.push(arrs[last + i])
                        }
                    }
                    this.loading = false;
                }, 2500);
            }
        },
        watch:{
            isTrigger(value){
                this.$bus.emit('getTrigger',value);
            }
        },
        filters:{
            formatNumCount(value){
                if(value>99999 && value < 99999999){
                    return parseInt(value / 10000) + "万";
                }
                else if(value > 99999999){
                    return parseInt(value / 100000000) + "亿";
                }
                else{
                    return value;
                }
            },
            formatName(value){
                let arrs = value.map(item=>{
                    return item.name
                })
                return arrs.join(' / ')
            }
        }
    }
</script>
